/*
 * @Author: Await
 * @Date: 2025-05-08 15:30:22
 * @LastEditors: Await
 * @LastEditTime: 2025-05-06 16:08:20
 * @Description: 图表网格配置组件
 */
import React, { useState, useCallback, useEffect } from 'react';
import {
    Form,
    Input,
    Switch,
    InputNumber,
    Row,
    Col,
    Typography,
    Tooltip,
    ColorPicker,
    Divider,
    Space,
    Select,
    Button,
    Dropdown,
    Modal,
    message,
    Tabs
} from 'antd';
import { InfoCircleOutlined, AppstoreOutlined, DeleteOutlined, SaveOutlined, CheckOutlined } from '@ant-design/icons';
import type { MenuProps, TabsProps } from 'antd';

// 从类型定义文件导入GridConfig接口
import { GridConfig as GridConfigType } from '../../types/chartTypes';
import { useGridPresets } from '../../hooks/useGridPresets';
import { useLocalStorage } from '../../hooks/useLocalStorage';

interface GridConfigProps {
    config?: GridConfigType;
    onChange: (config: GridConfigType) => void;
    is3D?: boolean; // 是否为3D图表
}

/**
 * 网格配置组件
 * 
 * 控制图表的网格区域布局和样式
 * 支持常规2D网格和3D网格的配置
 */
const GridConfig: React.FC<GridConfigProps> = ({ config = {}, onChange, is3D = false }) => {
    // 确保配置对象存在
    const gridConfig: GridConfigType = config || {};

    // 预设相关状态
    const [showPresetModal, setShowPresetModal] = useState(false);
    const [presetName, setPresetName] = useState('');
    const [lastAppliedPreset, setLastAppliedPreset] = useLocalStorage<string>('last-applied-grid-preset', '');
    const [activeTab, setActiveTab] = useState('1');
    // 记录上一次的图表类型（2D/3D）
    const [previousIs3D, setPreviousIs3D] = useState(is3D);

    // 使用网格预设钩子
    const { allPresets, saveAsPreset, deletePreset } = useGridPresets();

    // 监听图表类型变化，适配配置
    useEffect(() => {
        // 如果图表类型从2D变为3D或从3D变为2D
        if (previousIs3D !== is3D) {
            // 保存新的图表类型
            setPreviousIs3D(is3D);

            // 从配置中分离基础属性和特定于图表类型的属性
            const {
                boxWidth, boxDepth, boxHeight,
                ...baseConfig
            } = gridConfig;

            // 创建新的配置对象
            let newConfig: GridConfigType = { ...baseConfig };

            // 从2D切换到3D时，添加3D特有配置
            if (is3D) {
                // 应用3D默认配置
                newConfig = {
                    ...newConfig,
                    boxWidth: boxWidth !== undefined ? boxWidth : 200,
                    boxDepth: boxDepth !== undefined ? boxDepth : 80,
                    boxHeight: boxHeight !== undefined ? boxHeight : 100
                } as GridConfigType;
            }

            // 更新配置
            onChange(newConfig);

            // 当图表类型发生变化时，重置最后应用的预设
            setLastAppliedPreset('');

            // 重置回第一个标签页
            setActiveTab('1');
        }
    }, [is3D, previousIs3D, onChange, gridConfig, setLastAppliedPreset]);

    // 应用预设
    const applyPreset = useCallback((presetConfig: GridConfigType) => {
        // 创建预设配置的副本
        const filteredConfig = { ...presetConfig };

        // 根据当前图表类型处理配置
        if (is3D) {
            // 确保3D特有属性存在
            if (filteredConfig.boxWidth === undefined) filteredConfig.boxWidth = 200;
            if (filteredConfig.boxDepth === undefined) filteredConfig.boxDepth = 80;
            if (filteredConfig.boxHeight === undefined) filteredConfig.boxHeight = 100;
        } else {
            // 如果是2D图表，删除3D特有属性
            delete filteredConfig.boxWidth;
            delete filteredConfig.boxDepth;
            delete filteredConfig.boxHeight;
        }

        onChange(filteredConfig);
    }, [onChange, is3D]);

    // 保存当前配置为预设
    const handleSavePreset = useCallback(() => {
        if (!presetName.trim()) {
            message.error('请输入预设名称');
            return;
        }

        if (saveAsPreset(presetName, gridConfig)) {
            setShowPresetModal(false);
            setPresetName('');
            setLastAppliedPreset(presetName);
        }
    }, [presetName, gridConfig, saveAsPreset, setLastAppliedPreset]);

    // 处理配置变更
    const handleConfigChange = (key: string, value: any) => {
        // 创建更新后的配置对象
        let updatedConfig;

        // 处理嵌套属性
        if (key.includes('.')) {
            const keys = key.split('.');
            updatedConfig = { ...gridConfig };
            let current = updatedConfig as any;

            for (let i = 0; i < keys.length - 1; i++) {
                if (!current[keys[i]]) {
                    current[keys[i]] = {};
                }
                current = current[keys[i]];
            }

            current[keys[keys.length - 1]] = value;
        } else {
            updatedConfig = { ...gridConfig, [key]: value };
        }

        // 调用父组件的onChange回调
        onChange(updatedConfig);
    };

    // 表单项标题组件
    const FormItemLabel = ({ children, tooltip }: { children: React.ReactNode, tooltip?: string }) => (
        <div style={{ marginBottom: 4, display: 'flex', alignItems: 'center' }}>
            <Typography.Text type="secondary" style={{ fontSize: 12 }}>
                {children}
            </Typography.Text>
            {tooltip && (
                <Tooltip title={tooltip}>
                    <InfoCircleOutlined style={{ marginLeft: 4, fontSize: 12, color: '#999' }} />
                </Tooltip>
            )}
        </div>
    );

    // 预设列表的内容
    const presetsContent = (
        <div style={{ width: 300, maxHeight: 400, overflow: 'auto' }}>
            <Typography.Text type="secondary" style={{ padding: '8px 12px', display: 'block' }}>
                选择预设布局样式
            </Typography.Text>
            <Row gutter={[8, 8]} style={{ padding: '0 8px 8px 8px' }}>
                {allPresets.map((preset) => (
                    <Col span={12} key={preset.name}>
                        <div
                            style={{
                                border: lastAppliedPreset === preset.name ? '2px solid #1890ff' : '1px solid #e8e8e8',
                                borderRadius: '4px',
                                padding: '8px',
                                cursor: 'pointer',
                                height: '100%',
                                position: 'relative',
                                backgroundColor: preset.name.includes('暗色') ? '#333' : '#fff'
                            }}
                            onClick={() => {
                                applyPreset(preset.config);
                                setLastAppliedPreset(preset.name);
                            }}
                        >
                            {lastAppliedPreset === preset.name && (
                                <CheckOutlined
                                    style={{
                                        position: 'absolute',
                                        top: '5px',
                                        right: '5px',
                                        color: '#1890ff',
                                        fontSize: '14px'
                                    }}
                                />
                            )}
                            <Typography.Text
                                style={{
                                    display: 'block',
                                    textAlign: 'center',
                                    fontSize: '12px',
                                    marginBottom: '4px',
                                    color: preset.name.includes('暗色') ? '#ddd' : '#333'
                                }}
                            >
                                {preset.name}
                            </Typography.Text>

                            {/* 预设预览 */}
                            <div style={{
                                position: 'relative',
                                height: 50,
                                backgroundColor: '#f0f0f0',
                                overflow: 'hidden',
                                borderRadius: '2px'
                            }}>
                                {/* 网格区域可视化 */}
                                <div style={{
                                    position: 'absolute',
                                    left: preset.config.left === 'center' ? '50%' : typeof preset.config.left === 'string' && preset.config.left.includes('%') ? preset.config.left : '10%',
                                    right: typeof preset.config.right === 'string' && preset.config.right.includes('%') ? preset.config.right : '10%',
                                    top: preset.config.top === 'middle' ? '50%' : typeof preset.config.top === 'string' && preset.config.top.includes('%') ? preset.config.top : '20%',
                                    bottom: typeof preset.config.bottom === 'string' && preset.config.bottom.includes('%') ? preset.config.bottom : '20%',
                                    transform: (preset.config.left === 'center' || preset.config.top === 'middle') ? 'translate(-50%, -50%)' : 'none',
                                    width: preset.config.width ?
                                        (typeof preset.config.width === 'string' && preset.config.width.includes('%') ? preset.config.width : '80%') :
                                        'auto',
                                    height: preset.config.height ?
                                        (typeof preset.config.height === 'string' && preset.config.height.includes('%') ? preset.config.height : '60%') :
                                        'auto',
                                    backgroundColor: preset.config.backgroundColor || 'transparent',
                                    border: preset.config.borderWidth ? `${preset.config.borderWidth}px solid ${preset.config.borderColor || '#ccc'}` : 'none',
                                    borderRadius: preset.config.borderRadius ? `${preset.config.borderRadius}px` : '0',
                                    boxShadow: preset.config.shadowBlur ? `0 0 ${preset.config.shadowBlur}px ${preset.config.shadowColor || 'rgba(0,0,0,0.1)'}` : 'none',
                                    display: 'flex',
                                    alignItems: 'center',
                                    justifyContent: 'center'
                                }}>
                                    {/* 添加网格内容以便可视化 */}
                                    <div style={{
                                        width: '100%',
                                        height: '100%',
                                        display: 'flex',
                                        flexDirection: 'column',
                                        justifyContent: 'center',
                                        alignItems: 'center'
                                    }}>
                                        <div style={{
                                            width: '70%',
                                            height: '4px',
                                            backgroundColor: '#91caff',
                                            marginBottom: '2px',
                                            borderRadius: '1px'
                                        }}></div>
                                        <div style={{
                                            width: '50%',
                                            height: '4px',
                                            backgroundColor: '#91caff',
                                            borderRadius: '1px'
                                        }}></div>
                                    </div>
                                </div>
                            </div>

                            {!preset.isDefault && (
                                <Button
                                    type="text"
                                    danger
                                    icon={<DeleteOutlined />}
                                    size="small"
                                    style={{ position: 'absolute', bottom: '5px', right: '5px', fontSize: '12px' }}
                                    onClick={(e) => {
                                        e.stopPropagation();
                                        deletePreset(preset.name);
                                        if (lastAppliedPreset === preset.name) {
                                            setLastAppliedPreset('');
                                        }
                                    }}
                                />
                            )}
                        </div>
                    </Col>
                ))}
            </Row>
        </div>
    );

    // Tab配置
    const tabItems: TabsProps['items'] = [
        {
            key: '1',
            label: '基本设置',
            children: (
                <div style={{ padding: '8px 0' }}>
                    <Row gutter={[16, 8]}>
                        <Col span={12}>
                            <FormItemLabel tooltip="是否显示网格">
                                显示网格
                            </FormItemLabel>
                            <Switch
                                checked={gridConfig.show !== false}
                                onChange={checked => handleConfigChange('show', checked)}
                                size="small"
                            />
                        </Col>
                        <Col span={12}>
                            <FormItemLabel tooltip="是否将刻度标签包含在内">
                                包含标签
                            </FormItemLabel>
                            <Switch
                                checked={gridConfig.containLabel !== false}
                                onChange={checked => handleConfigChange('containLabel', checked)}
                                size="small"
                            />
                        </Col>
                    </Row>

                    <Divider orientation="left" style={{ margin: '12px 0', fontSize: 12 }}>位置和大小</Divider>

                    <Row gutter={[16, 8]}>
                        <Col span={12}>
                            <FormItemLabel tooltip="网格左侧距离容器左侧的距离，可以是具体像素值或百分比">
                                左边距
                            </FormItemLabel>
                            <Input
                                value={gridConfig.left !== undefined ? String(gridConfig.left) : '10%'}
                                onChange={e => handleConfigChange('left', e.target.value)}
                                placeholder="例如：'10%'或50"
                                size="small"
                            />
                        </Col>
                        <Col span={12}>
                            <FormItemLabel tooltip="网格顶部距离容器顶部的距离，可以是具体像素值或百分比">
                                上边距
                            </FormItemLabel>
                            <Input
                                value={gridConfig.top !== undefined ? String(gridConfig.top) : '60'}
                                onChange={e => handleConfigChange('top', e.target.value)}
                                placeholder="例如：'10%'或60"
                                size="small"
                            />
                        </Col>
                        <Col span={12}>
                            <FormItemLabel tooltip="网格右侧距离容器右侧的距离，可以是具体像素值或百分比">
                                右边距
                            </FormItemLabel>
                            <Input
                                value={gridConfig.right !== undefined ? String(gridConfig.right) : '10%'}
                                onChange={e => handleConfigChange('right', e.target.value)}
                                placeholder="例如：'10%'或50"
                                size="small"
                            />
                        </Col>
                        <Col span={12}>
                            <FormItemLabel tooltip="网格底部距离容器底部的距离，可以是具体像素值或百分比">
                                下边距
                            </FormItemLabel>
                            <Input
                                value={gridConfig.bottom !== undefined ? String(gridConfig.bottom) : '60'}
                                onChange={e => handleConfigChange('bottom', e.target.value)}
                                placeholder="例如：'10%'或60"
                                size="small"
                            />
                        </Col>
                        <Col span={12}>
                            <FormItemLabel tooltip="网格的宽度，可以是具体像素值或百分比">
                                宽度
                            </FormItemLabel>
                            <Input
                                value={gridConfig.width !== undefined ? String(gridConfig.width) : 'auto'}
                                onChange={e => handleConfigChange('width', e.target.value)}
                                placeholder="例如：'100%'或500"
                                size="small"
                            />
                        </Col>
                        <Col span={12}>
                            <FormItemLabel tooltip="网格的高度，可以是具体像素值或百分比">
                                高度
                            </FormItemLabel>
                            <Input
                                value={gridConfig.height !== undefined ? String(gridConfig.height) : 'auto'}
                                onChange={e => handleConfigChange('height', e.target.value)}
                                placeholder="例如：'100%'或400"
                                size="small"
                            />
                        </Col>
                    </Row>
                </div>
            )
        },
        {
            key: '2',
            label: '样式设置',
            children: (
                <div style={{ padding: '8px 0' }}>
                    <Row gutter={[16, 8]}>
                        <Col span={12}>
                            <FormItemLabel tooltip="网格区域的背景色">
                                背景颜色
                            </FormItemLabel>
                            <ColorPicker
                                value={gridConfig.backgroundColor || 'transparent'}
                                onChange={color => {
                                    const colorValue = typeof color === 'string'
                                        ? color
                                        : color.toHexString();
                                    handleConfigChange('backgroundColor', colorValue)
                                }}
                                showText
                            />
                        </Col>
                        <Col span={12}>
                            <FormItemLabel tooltip="网格区域的边框颜色">
                                边框颜色
                            </FormItemLabel>
                            <ColorPicker
                                value={gridConfig.borderColor || '#ccc'}
                                onChange={color => {
                                    const colorValue = typeof color === 'string'
                                        ? color
                                        : color.toHexString();
                                    handleConfigChange('borderColor', colorValue)
                                }}
                                showText
                            />
                        </Col>
                        <Col span={12}>
                            <FormItemLabel tooltip="网格区域的边框宽度">
                                边框宽度
                            </FormItemLabel>
                            <InputNumber
                                value={gridConfig.borderWidth || 0}
                                onChange={value => handleConfigChange('borderWidth', value)}
                                min={0}
                                max={10}
                                style={{ width: '100%' }}
                                size="small"
                            />
                        </Col>
                        <Col span={12}>
                            <FormItemLabel tooltip="网格区域的边框圆角半径">
                                边框圆角
                            </FormItemLabel>
                            <InputNumber
                                value={gridConfig.borderRadius || 0}
                                onChange={value => handleConfigChange('borderRadius', value)}
                                min={0}
                                max={20}
                                style={{ width: '100%' }}
                                size="small"
                            />
                        </Col>
                        <Col span={12}>
                            <FormItemLabel tooltip="图形层叠，类似于CSS的z-index">
                                层叠等级(zlevel)
                            </FormItemLabel>
                            <InputNumber
                                value={gridConfig.zlevel || 0}
                                onChange={value => handleConfigChange('zlevel', value)}
                                min={0}
                                max={100}
                                style={{ width: '100%' }}
                                size="small"
                            />
                        </Col>
                        <Col span={12}>
                            <FormItemLabel tooltip="组件显示顺序，同一层级下数值大的显示在上层">
                                层级(z)
                            </FormItemLabel>
                            <InputNumber
                                value={gridConfig.z || 2}
                                onChange={value => handleConfigChange('z', value)}
                                min={0}
                                max={100}
                                style={{ width: '100%' }}
                                size="small"
                            />
                        </Col>
                    </Row>
                </div>
            )
        },
        {
            key: '3',
            label: '阴影设置',
            children: (
                <div style={{ padding: '8px 0' }}>
                    <Row gutter={[16, 8]}>
                        <Col span={12}>
                            <FormItemLabel tooltip="阴影模糊大小">
                                阴影模糊
                            </FormItemLabel>
                            <InputNumber
                                value={gridConfig.shadowBlur || 0}
                                onChange={value => handleConfigChange('shadowBlur', value)}
                                min={0}
                                max={50}
                                style={{ width: '100%' }}
                                size="small"
                            />
                        </Col>
                        {gridConfig.shadowBlur && gridConfig.shadowBlur > 0 && (
                            <>
                                <Col span={12}>
                                    <FormItemLabel tooltip="阴影颜色">
                                        阴影颜色
                                    </FormItemLabel>
                                    <ColorPicker
                                        value={gridConfig.shadowColor || 'rgba(0, 0, 0, 0.5)'}
                                        onChange={color => {
                                            const colorValue = typeof color === 'string'
                                                ? color
                                                : color.toHexString();
                                            handleConfigChange('shadowColor', colorValue)
                                        }}
                                        showText
                                    />
                                </Col>
                                <Col span={12}>
                                    <FormItemLabel tooltip="阴影水平方向上的偏移距离">
                                        阴影X偏移
                                    </FormItemLabel>
                                    <InputNumber
                                        value={gridConfig.shadowOffsetX || 0}
                                        onChange={value => handleConfigChange('shadowOffsetX', value)}
                                        min={-50}
                                        max={50}
                                        style={{ width: '100%' }}
                                        size="small"
                                    />
                                </Col>
                                <Col span={12}>
                                    <FormItemLabel tooltip="阴影垂直方向上的偏移距离">
                                        阴影Y偏移
                                    </FormItemLabel>
                                    <InputNumber
                                        value={gridConfig.shadowOffsetY || 0}
                                        onChange={value => handleConfigChange('shadowOffsetY', value)}
                                        min={-50}
                                        max={50}
                                        style={{ width: '100%' }}
                                        size="small"
                                    />
                                </Col>
                            </>
                        )}
                    </Row>
                </div>
            )
        }
    ];

    // 如果是3D图表，添加3D设置选项卡
    if (is3D) {
        tabItems.push({
            key: '4',
            label: '3D设置',
            children: (
                <div style={{ padding: '8px 0' }}>
                    <Row gutter={[16, 8]}>
                        <Col span={12}>
                            <FormItemLabel tooltip="3D网格的宽度">
                                网格宽度
                            </FormItemLabel>
                            <InputNumber
                                value={gridConfig.boxWidth || 200}
                                onChange={value => handleConfigChange('boxWidth', value)}
                                min={50}
                                max={500}
                                style={{ width: '100%' }}
                                size="small"
                            />
                        </Col>
                        <Col span={12}>
                            <FormItemLabel tooltip="3D网格的深度">
                                网格深度
                            </FormItemLabel>
                            <InputNumber
                                value={gridConfig.boxDepth || 80}
                                onChange={value => handleConfigChange('boxDepth', value)}
                                min={20}
                                max={200}
                                style={{ width: '100%' }}
                                size="small"
                            />
                        </Col>
                        <Col span={12}>
                            <FormItemLabel tooltip="3D网格的高度">
                                网格高度
                            </FormItemLabel>
                            <InputNumber
                                value={gridConfig.boxHeight || 100}
                                onChange={value => handleConfigChange('boxHeight', value)}
                                min={20}
                                max={300}
                                style={{ width: '100%' }}
                                size="small"
                            />
                        </Col>
                    </Row>
                </div>
            )
        });
    }

    return (
        <div style={{ padding: 12, background: '#fff', borderRadius: 4 }}>
            {/* 网格预览区域 */}
            <div
                style={{
                    marginBottom: 16,
                    padding: 16,
                    border: '1px dashed #d9d9d9',
                    borderRadius: 4,
                    backgroundColor: '#fafafa',
                    position: 'relative',
                    height: 120
                }}
            >
                {/* 2D/3D网格区域可视化 */}
                {!is3D ? (
                    // 2D网格预览
                    <div style={{
                        position: 'absolute',
                        left: gridConfig.left === 'center' ? '50%' : typeof gridConfig.left === 'string' && gridConfig.left.includes('%') ? gridConfig.left : '10%',
                        right: typeof gridConfig.right === 'string' && gridConfig.right.includes('%') ? gridConfig.right : '10%',
                        top: gridConfig.top === 'middle' ? '50%' : typeof gridConfig.top === 'string' && gridConfig.top.includes('%') ? gridConfig.top : '20%',
                        bottom: typeof gridConfig.bottom === 'string' && gridConfig.bottom.includes('%') ? gridConfig.bottom : '20%',
                        transform: (gridConfig.left === 'center' || gridConfig.top === 'middle') ? 'translate(-50%, -50%)' : 'none',
                        width: gridConfig.width ?
                            (typeof gridConfig.width === 'string' ? gridConfig.width : `${gridConfig.width}px`) :
                            'auto',
                        height: gridConfig.height ?
                            (typeof gridConfig.height === 'string' ? gridConfig.height : `${gridConfig.height}px`) :
                            'auto',
                        backgroundColor: gridConfig.backgroundColor || 'transparent',
                        border: gridConfig.borderWidth ? `${gridConfig.borderWidth}px solid ${gridConfig.borderColor || '#ccc'}` : 'none',
                        borderRadius: gridConfig.borderRadius ? `${gridConfig.borderRadius}px` : '0',
                        boxShadow: gridConfig.shadowBlur ? `${gridConfig.shadowOffsetX || 0}px ${gridConfig.shadowOffsetY || 0}px ${gridConfig.shadowBlur}px ${gridConfig.shadowColor || 'rgba(0,0,0,0.1)'}` : 'none',
                        display: 'flex',
                        flexDirection: 'column',
                        justifyContent: 'center',
                        alignItems: 'center'
                    }}>
                        <div style={{
                            width: '60%',
                            height: '8px',
                            backgroundColor: '#91caff',
                            marginBottom: '5px',
                            borderRadius: '2px'
                        }}></div>
                        <div style={{
                            width: '80%',
                            height: '8px',
                            backgroundColor: '#91caff',
                            marginBottom: '5px',
                            borderRadius: '2px'
                        }}></div>
                        <div style={{
                            width: '40%',
                            height: '8px',
                            backgroundColor: '#91caff',
                            borderRadius: '2px',
                            marginBottom: '5px'
                        }}></div>
                        <div style={{ fontSize: 12, color: '#666', marginTop: 5 }}>网格区域</div>
                    </div>
                ) : (
                    // 3D网格预览
                    <div style={{
                        position: 'absolute',
                        left: '50%',
                        top: '50%',
                        transform: 'translate(-50%, -50%)',
                        width: '100%',
                        height: '100%',
                        display: 'flex',
                        justifyContent: 'center',
                        alignItems: 'center',
                        perspective: '600px'
                    }}>
                        <div style={{
                            position: 'relative',
                            width: `${Math.min(gridConfig.boxWidth || 200, 160)}px`,
                            height: `${Math.min(gridConfig.boxHeight || 100, 80)}px`,
                            transform: 'rotateX(45deg) rotateZ(-30deg)',
                            transformStyle: 'preserve-3d',
                            backgroundColor: gridConfig.backgroundColor || 'rgba(200, 220, 255, 0.05)',
                            border: gridConfig.borderWidth ? `${gridConfig.borderWidth}px solid ${gridConfig.borderColor || '#ccc'}` : '1px solid #ddd',
                            boxShadow: gridConfig.shadowBlur ? `${gridConfig.shadowOffsetX || 0}px ${gridConfig.shadowOffsetY || 0}px ${gridConfig.shadowBlur}px ${gridConfig.shadowColor || 'rgba(0,0,0,0.1)'}` : 'none'
                        }}>
                            {/* 3D网格线 */}
                            <div style={{
                                position: 'absolute',
                                width: '100%',
                                height: '100%',
                                backgroundImage: 'linear-gradient(90deg, #eee 1px, transparent 1px), linear-gradient(#eee 1px, transparent 1px)',
                                backgroundSize: '20px 20px'
                            }}></div>

                            {/* 深度边缘-Y轴 */}
                            <div style={{
                                position: 'absolute',
                                width: '1px',
                                height: `${Math.min(gridConfig.boxHeight || 100, 80)}px`,
                                backgroundColor: '#1890ff',
                                transform: `translateZ(${Math.min((gridConfig.boxDepth || 80) / 2, 40)}px)`,
                                left: 0,
                                top: 0
                            }}></div>

                            {/* 深度边缘-X轴 */}
                            <div style={{
                                position: 'absolute',
                                width: `${Math.min(gridConfig.boxWidth || 200, 160)}px`,
                                height: '1px',
                                backgroundColor: '#1890ff',
                                transform: `translateZ(${Math.min((gridConfig.boxDepth || 80) / 2, 40)}px)`,
                                left: 0,
                                top: 0
                            }}></div>

                            {/* 深度指示体 */}
                            <div style={{
                                position: 'absolute',
                                width: '12px',
                                height: '12px',
                                backgroundColor: '#f5f5f5',
                                border: '1px solid #91caff',
                                transform: `translateZ(${Math.min((gridConfig.boxDepth || 80) / 2, 40)}px)`,
                                left: 0,
                                top: 0,
                                borderRadius: '50%',
                                boxShadow: '0 0 4px rgba(24, 144, 255, 0.5)'
                            }}></div>

                            {/* 数据柱形图形 */}
                            <div style={{
                                position: 'absolute',
                                left: '30%',
                                top: '30%',
                                width: '20px',
                                height: '40px',
                                backgroundColor: 'rgba(24, 144, 255, 0.6)',
                                transform: `translateZ(${Math.min((gridConfig.boxDepth || 80) / 4, 20)}px)`,
                                boxShadow: '0 0 5px rgba(0, 0, 0, 0.1)'
                            }}></div>

                            <div style={{
                                position: 'absolute',
                                left: '60%',
                                top: '50%',
                                width: '20px',
                                height: '20px',
                                backgroundColor: 'rgba(82, 196, 26, 0.6)',
                                transform: `translateZ(${Math.min((gridConfig.boxDepth || 80) / 4, 20)}px)`,
                                boxShadow: '0 0 5px rgba(0, 0, 0, 0.1)'
                            }}></div>

                            <div style={{
                                position: 'absolute',
                                left: '40px',
                                top: '10px',
                                transform: 'rotateX(-45deg) rotateZ(30deg)',
                                color: '#666',
                                fontSize: '12px',
                                whiteSpace: 'nowrap',
                                textShadow: '0 1px 2px rgba(255, 255, 255, 0.8)'
                            }}>3D网格预览</div>
                        </div>
                    </div>
                )}
            </div>

            <div style={{ marginBottom: 16, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <Typography.Title level={5} style={{ margin: 0 }}>
                    网格区域设置
                    <Tooltip title="控制图表的网格区域布局和样式">
                        <InfoCircleOutlined style={{ fontSize: 14, marginLeft: 8 }} />
                    </Tooltip>
                </Typography.Title>

                <Space>
                    <Dropdown menu={{ items: [] }} dropdownRender={() => presetsContent}>
                        <Button icon={<AppstoreOutlined />} size="small">
                            预设布局
                        </Button>
                    </Dropdown>
                    <Button
                        icon={<SaveOutlined />}
                        size="small"
                        onClick={() => setShowPresetModal(true)}
                    >
                        保存预设
                    </Button>
                </Space>
            </div>

            <Tabs
                activeKey={activeTab}
                onChange={setActiveTab}
                items={tabItems}
                size="small"
                style={{ marginBottom: 16 }}
            />

            {/* 保存预设的模态框 */}
            <Modal
                title="保存为预设"
                open={showPresetModal}
                onOk={handleSavePreset}
                onCancel={() => {
                    setShowPresetModal(false);
                    setPresetName('');
                }}
            >
                <div style={{ marginBottom: 16 }}>
                    <Typography.Text>请输入预设名称：</Typography.Text>
                    <Input
                        value={presetName}
                        onChange={e => setPresetName(e.target.value)}
                        placeholder="例如：我的自定义布局"
                        style={{ marginTop: 8 }}
                        maxLength={20}
                    />
                </div>
                <Typography.Text type="secondary">
                    保存后可以快速应用此网格配置
                </Typography.Text>
            </Modal>
        </div>
    );
};

export default GridConfig;